<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title>Circles</title>
	<!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    
    	body { 
			padding-top: 50px;
			padding-bottom: 80px;
			background-color:#f6f7f7;
		}
		.commonFont{
    		font-family: 'Nanum Gothic', sans-serif;
    	}
    	#topmenu li a:hover,
    	#topmenu li a:focus{
    		background-color:#F6F7F8;
    	}
    	#topmenu .active a,
    	#topmenu .active a:hover,
    	#topmenu .active a:focus{
    		background-color:#F6F7F8;
    	}
    	
    	#topmenu li a{
    		text-decoration:none;
    		text-align:left;
    		display: block;
    		padding: 14px 0 14px 10px;
    		border-bottom: 1px #DBDBDB solid;
    	}
    	
    	#topmenu li.active,
    	#topmenu li.active a,
    	#topmenu li.active a *{
    		background-color:#F6F7F8;
    	}
    	.alert{
    		width:600px;
    		position: fixed;
    		z-index: 1050;
    		left: 50%;
    		margin-left:-300px;
    		top:15px;
    		display:none;
    	}
    	@media screen and (max-width: 768px){ .alert{width:100%!important;left:0!important;margin-left:0!important;}}
    	@media screen and (max-width: 378px){ .pull-left > strong {padding-right:15px!important;}}
    	
    	#mobile_menu_list li{
    		cursor: pointer;
    		width: 100%;
    		height: 50px;
    		margin-top: 5px;
    		background-color: #F5F5F5;
			border: 1px solid #ddd;
			border-radius: 4px;
			-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
			box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
			font-family: 'Nanum Gothic Coding', monospace;
			font-size: 1.3em;
    	}
    	#mobile_menu_list li p{
    		padding-top: 15px;
			padding-left: 10px;
			padding-right: 10px;
    	}
    	.subLayout{
    		border-radius: 3px;
    		border-bottom-color: #D0D1D5!important;
    		border:1px #DFE0E4 solid;
    		position:absolute;
    		width:95%;
    		padding:15px;
    		background-color: #fff;
    		margin:0 0 0 15px;
    		min-height: 500px;
    		display: none;
    		overflow:hidden;
    	}
    	.tabMenu{
    		margin:0;
    		padding-bottom: 0!important;
    		display: block;
    		width: 100%;
    		background-color: #fff;
    		border:1px #DFE0E4 solid;
    		border-bottom-color: #D0D1D5!important;
    		border-radius: 3px;
    		overflow:hidden;
    	}
    	
    </style>
	<script src="/resources/js/jquery-1.11.0.js"></script>
	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
    	
    	// 업로드된 프로필사진으로 보여주기
    	function readURL(input){
    		if (input.files && input.files[0]) {
    			
    			if(input.value.substr(input.value.length-3) == "jpg" || input.value.substr(input.value.length-3) == "gif" || input.value.substr(input.value.length-3) == "bmp" || input.value.substr(input.value.length-3) == "png"){
					var reader = new FileReader();
                    reader.onload = function (e) {
                    	var previewImage = $('#previewImage');
                    	
                    	previewImage.attr('src', e.target.result)
                    	.attr('width', 250)
                    	.attr('height', 250);
                        
                    	$('#saveFbImageButton').hide();
                        $('#saveImageButton').show();
                    };
                    
                    reader.readAsDataURL(input.files[0]);
    			}else{
    				alert('사진만 올릴 수 있습니다');
    				return false;
    			}
            }
    	}
    	
    	// 숫자만 입력 가능하도록
		function onlyNumber(event) {
		    var key = window.event ? event.keyCode : event.which;    
		    if ((event.shiftKey == false) && ((key  > 47 && key  < 58) || (key  > 95 && key  < 106)
		    || key  == 35 || key  == 36 || key  == 37 || key  == 39  // 방향키 좌우,home,end  
		    || key  == 8  || key  == 46 )
		    ) {
		        return true;
		    }else {
		        return false;
		    }    
		};
    	
    	/* function memberLeave(ff){
    		if(confirm('정말로 탈퇴 하시겠습니까?')){
    			ff.submit();
    			ff.action = "/memberLeave";
    		}
    	} */
    	
    	/* 모바일 메뉴 뒤로가기 이벤트 */
    	function mobile_menu_back(id){
    		$("#"+id).hide('slide',{'direction':'right'},600);
    		$("#mobile_menu").show('slide',{'direction':'left'},500);
    		
    	}
    	
    	/* 모바일 메뉴 클릭 이벤트 */
    	function mobile_tabmenu(id){
    		$("#mobile_menu").hide('slide',{'direction':'left'},600);
    		$("#"+id).show('slide',{'direction':'right'},500);
    	}
    	
    	$(document).ready(function(){
    		$("#account").fadeIn(500);
    		
    		//프로필 사진에 따라 버튼 정의 해주기
    		var profileCheck = '${userDto.profileImage}';
    		if(profileCheck == ''){
    			$("#uploadImageButton").append(' 사진가져오기');
    			$("#previewImage").removeAttr('src').attr('src','/resources/img/default_profile_pic.png');
    		}else{
    			$("#uploadImageButton").append(' 사진변경하기');
    		}
    		
    		// 휴대폰 국가에 따라 국가번호 선택해주기
    		var phoneNc = '${userDto.phone_nationcode}';
    		$("#Phone_NationCode").find('option').each(function(){
    			if($(this).val() == phoneNc) {
    				$(this).attr('selected','selected');
    			}
    		});
    		
    		// 탭 메뉴 클릭 이벤트
    		$('#topmenu > li > a').on('click', function(){
    			$("#mobile_menu").hide();
    			$(this).parent().parent().find('li').each(function(){
    				$(this).removeClass();
    			});
    			$(this).parent().addClass('active');
    			$(this).parent().parent().find('li').each(function(){
    				if($(this).attr('class') == "active"){
    					$($(this).find('a').attr('href')).fadeIn(500);
    				}else{
    					$($(this).find('a').attr('href')).hide();
    				}
    			});
    		});
    		
    		// 이름 수정
    		$("#InputName").one('input',function(){
    			$(this).parent().parent().find('button:first').removeAttr('disabled');
    		});
    		
    		// 이메일 수정
    		$("#InputEmail").one('input',function(){
    			$(this).parent().parent().find('button:first').removeAttr('disabled');
    		});
    		
    		// 휴대폰 수정
    		$("#InputPhone").one('input',function(){
    			$(this).parent().parent().find('button:first').removeAttr('disabled');
    		});
    		$("#Phone_NationCode").change(function(){
    			$(this).parent().parent().find('button:first').removeAttr('disabled');
    		});
    		
    		// 비밀번호 수정
    		$("#InputNewPasswd").one('input',function(){
    			$("#changePasswdButton").removeAttr('disabled');
    		});

    		var modify = $("button.modify");
    		// 회원정보 수정
    		modify.click(function(){
    			
    			// 셀렉터 캐쉬 변수
    			var failAlert = $("#failAlert");
    			var successAlert = $("#successAlert");
    			
    			var type = $(this).prev().find("input[type=text]").attr("id");
    			var data = "type="+$(this).prev().find("input[type=text]").attr("id")+"&value="+$(this).prev().find("input[type=text]").val();
    			var failMessage; 
    			var successMessage;
    			if(type == "InputName") {
    				failMessage = " 이름 변경에 실패하였습니다";
    				successMessage = " 이름 변경완료";
    			}else if(type == "InputEmail"){
    				failMessage = " 이메일 변경에 실패하였습니다";
    				successMessage = " 이메일 변경완료";
    			}else if(type == "InputPhone"){
    				failMessage = " 휴대폰 변경에 실패하였습니다";
    				successMessage = " 휴대폰 변경완료";
    				data = "type="+$(this).prev().find("input[type=text]").attr("id")+"&value="+$("#InputPhone").val()+"&phoneNa="+$("#Phone_NationCode").val();
    			}else{
    				failMessage = " 비밀번호 변경에 실패하였습니다";
    				successMessage = " 비밀번호 변경완료";
    				data = "type=passwd&value="+$("#InputNewPasswd").val()+"&cp="+$("#InputCurrentPasswd").val();
    			}
    			
    			$.ajax({
     			    type : "POST"
     			    , url : "/modifyAccounts"
     			    , data : data
     			    , dataType : "text"
     			    , timeout : 5000
     			    , error : function() {
     			    	failAlert.find("a").html("<i class='glyphicon glyphicon-remove' style='color:#BF0000;'></i>"+failMessage);
     			    	failAlert.fadeIn(400).delay(2000).fadeOut(400);
     			    }
     			    , success : function(response) {
     			    	if(response == "1"){
     			    		successAlert.find("a").html("<i class='glyphicon glyphicon-ok' style='color:#5CB85C;'></i>"+successMessage);
	     			    	successAlert.fadeIn(400).delay(2000).fadeOut(400);
	     			    	$("#InputCurrentPasswd").parent().removeClass("has-error");
     			    	}else{
     			    		failAlert.find("a").html("<i class='glyphicon glyphicon-remove' style='color:#BF0000;'></i> 현재 비밀번호가 일치하지 않습니다");
         			    	failAlert.fadeIn(400).delay(2000).fadeOut(400);
         			    	$("#InputCurrentPasswd").parent().addClass("has-error");
     			    	}
        				if(type == "InputName"){
        					$("#displayName").html("&nbsp;"+$("#InputName").val());
        					$(".setDisName").html($("#InputName").val());
        				}else if(type == "InputEmail"){
        					$(".setDisEmail").html($("#InputEmail").val());
        				}else{
        					$("span.setDisPhone").html("+"+$("#Phone_NationCode").val()+"&nbsp;"+$("#InputPhone").val());
        				}
     			    }
     			    , beforeSend: function() {
     			    	modify.html("저장중...");
     			    	modify.attr("disabled","disabled");
     			    }
     			    , complete: function() {
     			    	modify.html("변경하기");
     			    	modify.removeAttr("disabled");
     			    }
     			});
    		});

    		// 경고창 닫기버튼
    		$("button.close").click(function(){
    			$(this).parent().hide();
    		});
    		
    	}); // end document
    	
    	// 프로필 이미지 업로드 ajax 구현 메소드
    	function Upload() {
    		var profileImageProgress = $("#profileImageProgress");
    		var failAlert = $("#failAlert");
			var successAlert = $("#successAlert");
			$.getScript('/resources/js/jquery.form.js', function(){
	    		$("#imageForm").ajaxSubmit({
	    			statusCode: { 400: function() {
	    					failAlert.find("a").html("<i class='glyphicon glyphicon-remove' style='color:#BF0000;'></i> 파일이 잘못되었습니다");
	    					failAlert.fadeIn(400).delay(2000).fadeOut(400);
	    					profileImageProgress.hide(500);
	    				},
	    				500: function() {
	    					failAlert.find("a").html("<i class='glyphicon glyphicon-remove' style='color:#BF0000;'></i> 사진을 올릴 수 없습니다");
	    					failAlert.fadeIn(400).delay(2000).fadeOut(400);
	    					profileImageProgress.hide(500);
	    				}
	    			},
	    			beforeSubmit: function() { 
						$("#saveImageButton").hide();
						profileImageProgress.show(200);
	    			},
	    			success: function(data) {
	    				successAlert.find("a").html("<i class='glyphicon glyphicon-ok' style='color:#5CB85C;'></i>&nbsp;이미지가 성공적으로 업로드 되었습니다");
	    				successAlert.fadeIn(400).delay(2000).fadeOut(400);
	    				$("#displayProfileImage").removeAttr("src").attr("src","/profileImageViewer/${userDto.num}?"+new Date().getTime()); //최신이미지로 변경시켜주기 위해 뒤에 시간붙힘
	    				profileImageProgress.hide(500);
	    				
	    			}
	    		});
			});
    	}
    	
    	// 페이스북 프로필 사진 가져오기
    	function getFbProfileImg(){
    		$("#previewImage").attr("src", "https://graph.facebook.com/"+'${userDto.passwd}'+"/picture?type=large");
    		$('#saveFbImageButton').show();
    	}
    	
    	// 페이스북 사진 저장하기
    	function FbUpload() {
    		var id = '${userDto.passwd}';
    		var profileImageProgress = $("#profileImageProgress");
    		var failAlert = $("#failAlert");
			var successAlert = $("#successAlert");
    		$.ajax({
 			    type : "POST"
 			    , url : "/updateFbProfileImage?id="+id
 			    , dataType : "text"
 			    , timeout : 5000
 			    , error : function() {
 			    	failAlert.find("a").html("<i class='glyphicon glyphicon-remove' style='color:#BF0000;'></i> 사진을 올릴 수 없습니다");
					failAlert.fadeIn(400).delay(2000).fadeOut(400);
 			    }
 			    , success : function(response) {
 			    	if(response == "success"){
 			    		successAlert.find("a").html("<i class='glyphicon glyphicon-ok' style='color:#5CB85C;'></i>&nbsp;이미지가 성공적으로 업로드 되었습니다");
 	    				successAlert.fadeIn(400).delay(2000).fadeOut(400);
 	    				$("#displayProfileImage").removeAttr("src").attr("src","/profileImageViewer/${userDto.num}?"+new Date().getTime()); //최신이미지로 변경시켜주기 위해 뒤에 시간붙힘
 			    	}else{
 			    		failAlert.find("a").html("<i class='glyphicon glyphicon-remove' style='color:#BF0000;'></i> 사진을 올릴 수 없습니다");
 						failAlert.fadeIn(400).delay(2000).fadeOut(400);
 			    	}
 			    }
 			    , beforeSend: function() {
 			    	$("#saveFbImageButton").hide();
 			    	profileImageProgress.show(200);
 			    }
 			    , complete: function() {
    				profileImageProgress.hide(500);
 			    }
 			});
    	}
    </script>
  </head>

  <body>
    <!-- Fixed navbar -->
		<jsp:include page = "head.jsp" flush="false"/>
	<!-- Fixed navbar -->
	<br>
    <div id="mainWarp">
    	<div class="container">
    		<div class="row">
    		
    		
    		<div class="col-md-2 hidden-xs" style="margin:0!important;padding:0!important;">
    			<div class="tabMenu">
    			<ul class="commonFont list-unstyled" id="topmenu" style="padding:0;margin:0;">
    				<li class="active"><a href="#account" title="정보변경"><i class="fa fa-edit"></i>&nbsp;정보변경</a></li>
    				<li><a href="#privacy" title="공개 범위"><i class="glyphicon glyphicon-lock" style="color:#FDBD3B"></i>&nbsp;공개 범위</a></li>
    				<li><a href="#group" title="그룹 관리"><i class="fa fa-group" style="color:#3B5998"></i>&nbsp;그룹 관리</a></li>
    				<li><a href="#notifications" title="알림"><i class="fa fa-bell" style="color:#FF8000"></i>&nbsp;알림</a></li>
    				<li><a href="#invite" title="초대"><i class="glyphicon glyphicon-ok-sign" style="color:#307830;"></i>&nbsp;초대</a></li>
    				<li><a href="#memberLeave" title="회원탈퇴"><i class="glyphicon glyphicon-minus-sign" style="color:#BF0000;"></i>&nbsp;회원탈퇴</a></li>
    			</ul>
    			</div>
    		</div>
    		
    		<!-- <div class="col-md-2 visible-xs commonFont" style="margin:0; padding:0;">
    			<div class="btn-group" style="margin-top:5px;margin-bottom:5px;">
					<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
						<span class="glyphicon glyphicon-th-list"></span> 메뉴 <span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li class="active"><a href="#account"><i class="fa fa-edit"></i>&nbsp;정보변경</a></li>
	    				<li><a href="#privacy" title="공개 범위"><i class="glyphicon glyphicon-lock" style="color:#FDBD3B"></i>&nbsp;공개 범위</a></li>
	    				<li><a href="#group" title="그룹 관리"><i class="fa fa-group" style="color:#3B5998"></i>&nbsp;그룹 관리</a></li>
	    				<li style="height: 1px; margin: 9px 0; background-color: #e5e5e5; overflow: visible; list-style:none;"></li>
	    				<li><a href="#notifications" title="알림"><i class="fa fa-bell" style="color:#FF8000"></i>&nbsp;알림</a></li>
	    				<li><a href="#invite" title="초대"><i class="glyphicon glyphicon-ok-sign" style="color:#307830;"></i>&nbsp;초대</a></li>
	    				<li style="height: 1px; margin: 9px 0; background-color: #e5e5e5; overflow: visible; list-style:none;"></li>
	    				<li><a href="#memberLeave" title="회원탈퇴"><i class="glyphicon glyphicon-minus-sign" style="color:#BF0000;"></i>&nbsp;회원탈퇴</a></li>
					</ul>
				</div>
    		</div> -->
    		
    		<div class="col-md-10 commonFont" style="margin:0; padding:0; ">
    			<!-- 정보변경 -->
    			<div id="account" class="subLayout">
	    			<h4 class="hidden-xs"><strong>정보변경</strong></h4>
	    			<div class="visible-xs">
	    				<div style="float: left; color: #428BCA; cursor: pointer;" onclick="mobile_menu_back('account');"><i style="font-size:1.3em;" class="fa fa-chevron-left"></i>&nbsp;설정</div>
	    				<div style="margin: 0 auto;"><h4 style="text-align: center;"><strong>정보변경</strong></h4></div>
    				</div>
	    			<hr style="margin-top:8px;">
	    			
   					<div class="panel-group" id="accordion">
   						<div class="panel panel-default">
   							<div class="panel-heading" style="cursor: pointer;" data-toggle="collapse" data-target="#editName" data-parent="#accordion">
   								<div class="panel-title" style="display:block; height:30px; padding-top:4px;">
	   								<div class="pull-left">
	   									<strong style="padding-right:65px;">이름</strong><span class="hidden-xs setDisName">${userDto.name}</span>
	   								</div>
	   								<div class="pull-right">
	   									<i class="fa fa-chevron-right" style="color:#828282;"></i>
	   								</div>
   								</div>
   							</div>
	   						<div id="editName" class="panel-collapse collapse">
		   						<div class="panel-body">
		   							<div class="form-inline" style="margin-bottom:5px;">
		   								<div class="form-group">
			   								<input type="text" class="form-control" id="InputName" name="InputName" value="${userDto.name}">
			   							</div>
		   								<button type="button" title="변경하기" class="btn btn-primary modify" disabled="disabled" onclick="">변경하기</button>
			   							<button type="button" title="취소" class="btn btn-default" data-toggle="collapse" data-target="#editName" data-parent="#accordion"><i class="glyphicon glyphicon-repeat"></i> 취소</button>
			   						</div>
		   							<small class="text-muted"><i class="glyphicon glyphicon-exclamation-sign"></i> 다른 멤버들이 회원님을 알아 볼 수 있도록 실명을 사용해 주세요</small>
		   						</div>
	   						</div>
   						</div>
   					
	   					<div class="panel panel-default">
	   						<div class="panel-heading" style="cursor: pointer;" data-toggle="collapse" data-target="#editEmail" data-parent="#accordion">
	   							<div class="panel-title" style="display:block; height:30px; padding-top:4px;">
	   								<div class="pull-left">
	   									<strong style="padding-right:50px;">이메일</strong><span class="hidden-xs setDisEmail">${userDto.email}</span>
	   								</div>
	   								<div class="pull-right">
	   									<i class="fa fa-chevron-right" style="color:#828282;"></i>
	   								</div>
   								</div>
	   						</div>
		   					<div id="editEmail" class="panel-collapse collapse">
		   						<div class="panel-body">
		   							<div class="form-inline" style="margin-bottom:5px;">
		   								<div class="form-group">
			   								<input type="text" class="form-control" id="InputEmail" name="InputEmail" value="${userDto.email}">
			   							</div>
			   							<button type="button" class="btn btn-primary modify" disabled="disabled">변경하기</button>
			   							<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#editEmail" data-parent="#accordion"><i class="glyphicon glyphicon-repeat"></i> 취소</button>
			   						</div>
		   							<small class="text-muted"><i class="glyphicon glyphicon-exclamation-sign"></i> 사용중인 이메일로 설정해주세요</small>
		   						</div>
	   						</div>
	   					</div>
	   					
						<div class="panel panel-default">
							<div class="panel-heading" style="cursor: pointer;" data-toggle="collapse" data-target="#editPhone" data-parent="#accordion">
								<div class="panel-title" style="display:block; height:30px; padding-top:4px;">
	   								<div class="pull-left">
	   									<strong style="padding-right:50px;">휴대폰</strong>
	   									<c:if test="${userDto.phone ne null}">
	   										<span class="hidden-xs setDisPhone">+${userDto.phone_nationcode} ${userDto.phone}</span>
	   									</c:if>
	   								</div>
	   								<div class="pull-right" >
	   									<i class="fa fa-chevron-right" style="color:#828282;"></i>
	   								</div>
   								</div>
							</div>
							<div id="editPhone" class="panel-collapse collapse">
								<div class="panel-body">
									<div class="form-inline" style="margin-bottom:5px;">
		   								<div class="form-group">
		   									<select class="form-control" id="Phone_NationCode" name="Phone_NationCode">
		   										<option value="82">대한민국(+82)</option>
		   										<option value="1">미국(+1)</option>
		   										<option value="86">중국(+86)</option>
		   										<option value="81">일본(+81)</option>
		   									</select>
		   								</div>
		   								<div class="form-group">
			   								<input type="text" class="form-control" id="InputPhone" name="InputPhone" maxlength="11" value="${userDto.phone}" onkeydown="return onlyNumber(event)">
			   							</div>
			   							<button type="button" class="btn btn-primary modify" disabled="disabled">변경하기</button>
			   							<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#editPhone" data-parent="#accordion"><i class="glyphicon glyphicon-repeat"></i> 취소</button>
			   						</div>
		   							<small class="text-muted"><i class="glyphicon glyphicon-exclamation-sign"></i> 사용중인 국가와 휴대폰 번호를 설정해주세요</small>
								</div>
							</div>
						</div>
						
						<div class="panel panel-default">
							<div class="panel-heading" style="cursor: pointer;" data-toggle="collapse" data-target="#editPassword" data-parent="#accordion">
								<div class="panel-title" style="display:block; height:30px; padding-top:4px;">
	   								<div class="pull-left">
	   									<strong style="padding-right:50px;">비밀번호</strong>
	   								</div>
	   								<div class="pull-right">
	   									<i class="fa fa-chevron-right" style="color:#828282;"></i>
	   								</div>
   								</div>
							</div>
							<div id="editPassword" class="panel-collapse collapse">
								<div class="panel-body">
									<div class="col-md-8">
										<c:if test="${userDto.loginApp eq 'default'}">
										<form class="form-horizontal" role="form">
			   								<div class="form-group">
			   									<label for="InputCurrentPasswd" class="col-lg-3 control-label" style="margin:0;padding:6px 0 0 0;">현재 비밀번호</label>
			   									<div class="col-lg-5">
				   									<input type="password" class="form-control" id="InputCurrentPasswd" name="InputCurrentPasswd" placeholder="현재 비밀번호" title="현재 비밀번호">
				   								</div>
				   							</div>
				   							<div class="form-group">
			   									<label for="InputNewPasswd" class="col-lg-3 control-label" style="margin:0;padding:6px 0 0 0;">새 비밀번호</label>
			   									<div class="col-lg-5">
				   									<input type="password" class="form-control" id="InputNewPasswd" name="InputNewPasswd" placeholder="새 비밀번호" title="새 비밀번호">
				   								</div>
				   							</div>
				   							<div class="form-group">
			   									<label for="InputNewPasswd2" class="col-lg-3 control-label" style="margin:0;padding:6px 0 0 0;">새 비밀번호 재입력</label>
			   									<div class="col-lg-5">
				   									<input type="password" class="form-control" id="InputNewPasswd2" name="InputNewPasswd2" placeholder="새 비밀번호 재입력" title="새 비밀번호 재입력">
				   								</div>
				   							</div>
				   							<div class="form-group">
				   								<div class="col-lg-offset-3 col-lg-5">
				   									<button type="button" class="btn btn-primary modify" disabled="disabled" id="changePasswdButton">변경하기</button>
				   									<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#editPassword" data-parent="#accordion"><i class="glyphicon glyphicon-repeat"></i> 취소</button><br>
			   										
				   								</div>
				   							</div>
				   							
				   						</form>
				   						</c:if>
				   						<c:if test="${userDto.loginApp eq 'fb'}">
				   							<div><h4>페이스북에서 비밀번호를 변경해 주세요</h4></div>
				   						</c:if>
			   						</div> <!-- end col-md-8 -->
								</div> <!-- end panel-body -->
							</div>
						</div>
						
						<div class="panel panel-default">
							<div class="panel-heading" style="cursor: pointer;" data-toggle="collapse" data-target="#editProfileImage" data-parent="#accordion">
								<div class="panel-title" style="display:block; height:30px; padding-top:4px;">
	   								<div class="pull-left">
	   									<strong style="padding-right:50px;">프로필 사진</strong>
	   								</div>
	   								<div class="pull-right">
	   									<i class="fa fa-chevron-right" style="color:#828282;"></i>
	   								</div>
   								</div>
							</div>
							<div id="editProfileImage" class="panel-collapse collapse">
								<div class="panel-body">
									<div style="width:100%;">
										<form method="post" enctype="multipart/form-data" id="imageForm" name="imageForm" action="/setProfileImage">
										<input type="file" id="UploadImage" name="UploadImage" value="사진" style="visibility: hidden;" onchange="readURL(this)" accept=".gif,.jpg,.bmp,.png">
										<c:if test="${null ne userDto.profileImage}">
											<img id="previewImage" src="/profileImageViewer/${userDto.num}" alt="프로필 사진" width="250px;" height="250px;" class="img-thumbnail" style="margin-bottom:8px;"><br />
										</c:if>
										<c:if test="${null eq userDto.profileImage}">
    										<img id="previewImage" src="/resources/img/default_profile_pic.png" alt="프로필 사진" width="250px;" height="250px;" class="img-thumbnail" style="margin-bottom:8px;"><br />
    									</c:if>
										<button type="button" class="btn btn-primary" onclick ="document.getElementById('UploadImage').click();" id="uploadImageButton"><i class="fa fa-camera"></i></button>
										<!-- 페이스북 프로필 사진 가져오기 -->
										<c:if test="${userDto.loginApp eq 'fb'}">
												<button type="button" class="btn btn-primary" onclick="getFbProfileImg()" id="getFbProfileImgButton"><i class="fa fa-facebook-square" ></i>&nbsp;가져오기</button>
										</c:if>
										<br>
										<button type="button" class="btn btn-success" style="display:none;margin-top:8px;" id="saveImageButton" onclick="Upload()">저장하기</button>
										<button type="button" class="btn btn-success" style="display:none;margin-top:8px;" id="saveFbImageButton" onclick="FbUpload()">저장하기</button>
										<button type="button" class="btn btn-default" style="margin-top:8px;" data-toggle="collapse" data-target="#editProfileImage" data-parent="#accordion"><i class="glyphicon glyphicon-repeat"></i> 취소</button>
										<div id="profileImageProgress" class="progress progress-striped active" style="margin-top:8px;display:none;">
											<div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
										</div>
										</form>
									</div>
								</div>
							</div>
						</div>
				</div> <!-- end accordion -->
				
				<div class="well well-lg">
					<p>가입한 날짜 : ${userDto.joindate}</p>
					<p>마지막으로 접속한 날짜 : ${userDto.last_access}</p>
					<p>접속횟수 : ${userDto.access_count+1}</p>
				</div>
				
	    		</div>
    			<!-- 정보변경 -->
    			
    			<!-- 공개 범위 -->
    			<div id="privacy" class="subLayout">
    				<h4 class="hidden-xs"><strong>공개 범위</strong></h4>
	    			<div class="visible-xs">
	    				<div style="float: left; color: #428BCA; cursor: pointer;" onclick="mobile_menu_back('privacy');"><i style="font-size:1.3em;" class="fa fa-chevron-left"></i>&nbsp;설정</div>
	    				<div style="margin: 0 auto;"><h4 style="text-align: center;"><strong>공개 범위</strong></h4></div>
    				</div>
    				<hr style="margin-top:8px;">
    				<div class="panel-group" id="accordion2">
   						<div class="panel panel-default">
   							<div class="panel-heading" ondragstart="alert('ddddd')" style="cursor:pointer;" data-toggle="collapse" data-target="#editSearchPrivacy" data-parent="#accordion2" title="회원찾기">
   								<div class="panel-title" style="display:block; height:30px;">
	   								<div class="pull-left" style="padding-top:4px;">
	   									<strong style="padding-right:65px;">회원찾기</strong>
	   								</div>
	   								<div class="pull-right" style="padding-top:4px;">
	   									<i class="fa fa-chevron-right" style="color:#828282;"></i>
	   								</div>
   								</div>
   							</div>
	   						<div id="editSearchPrivacy" class="panel-collapse collapse">
		   						<div class="panel-body">
		   							<div class="form-inline" style="margin-bottom:5px;">
		   								<div class="form-group">
											<div class="radio-inline">
												<label data-toggle="tooltip" title="다른 사용자가 회원찾기를 통해 회원님을 찾을 수 있습니다"><input type="radio" name="access" id="access" value="1" >공개</label>
											</div>
											<div class="radio-inline">
												<label data-toggle="tooltip" title="회원찾기에서 표시되지 않습니다"><input type="radio" name="access" id="access" value="0">비공개</label>
											</div>
										</div>
										<div>
		   								<button type="button" title="변경하기" class="btn btn-primary modify" disabled="disabled" onclick="">변경하기</button>
			   							<button type="button" title="취소" class="btn btn-default" data-toggle="collapse" data-target="#editSearchPrivacy" data-parent="#accordion2"><i class="glyphicon glyphicon-repeat"></i> 취소</button>
			   							</div>
			   						</div>
		   							<small class="text-muted"><i class="glyphicon glyphicon-exclamation-sign"></i> 회원찾기에서 표시여부를 설정합니다</small>
		   						</div>
	   						</div>
	   					</div>
	   					
	   					<div class="panel panel-default">
	   						<div class="panel-heading" style="cursor:pointer;" data-toggle="collapse" data-target="#editViewerPrivacy" data-parent="#accordion2" title="프로필">
   								<div class="panel-title" style="display:block; height:30px;">
	   								<div class="pull-left" style="padding-top:4px;">
	   									<strong style="padding-right:65px;">프로필</strong>
	   								</div>
	   								<div class="pull-right" style="padding-top:4px;">
	   									<i class="fa fa-chevron-right" style="color:#828282;"></i>
	   								</div>
   								</div>
   							</div>
	   						<div id="editViewerPrivacy" class="panel-collapse collapse">
		   						<div class="panel-body">
		   							<div class="form-inline" style="margin-bottom:5px;">
		   								<div class="form-group">
											<div class="radio-inline">
												<label data-toggle="tooltip" title="모든 사용자가 프로필을 볼 수 있습니다"><input type="radio" name="access" id="access" value="1" >모두</label>
											</div>
											<div class="radio-inline">
												<label data-toggle="tooltip" title="그룹원만 프로필을 볼 수 있습니다"><input type="radio" name="access" id="access" value="0">그룹에게만</label>
											</div>
											<div class="radio-inline">
												<label data-toggle="tooltip" title="모든 사용자에게 프로필이 비공개 됩니다"><input type="radio" name="access" id="access" value="0">비공개</label>
											</div>
										</div>
										<div>
		   								<button type="button" title="변경하기" class="btn btn-primary modify" disabled="disabled" onclick="">변경하기</button>
			   							<button type="button" title="취소" class="btn btn-default" data-toggle="collapse" data-target="#editViewerPrivacy" data-parent="#accordion2"><i class="glyphicon glyphicon-repeat"></i> 취소</button>
			   							</div>
			   						</div>
		   							<small class="text-muted"><i class="glyphicon glyphicon-exclamation-sign"></i> 내 프로필을 볼 수 있는 사람을 설정합니다</small>
		   						</div>
	   						</div>
	   					</div>
	   					
	   					<div class="panel panel-default">
	   						<div class="panel-heading" style="cursor:pointer;" data-toggle="collapse" data-target="#editInfoPrivacy" data-parent="#accordion2" title="개인정보">
   								<div class="panel-title" style="display:block; height:30px;">
	   								<div class="pull-left" style="padding-top:4px;">
	   									<strong style="padding-right:65px;">개인정보</strong>
	   								</div>
	   								<div class="pull-right" style="padding-top:4px;">
	   									<i class="fa fa-chevron-right" style="color:#828282;"></i>
	   								</div>
   								</div>
   							</div>
	   						<div id="editInfoPrivacy" class="panel-collapse collapse">
		   						<div class="panel-body">
		   							<div class="form-group">
				    					<div class="row">
				   							<div class="col-xs-8 col-md-4">
				   								<label for="InputHighSchool" class="sr-only">고등학교</label>
												<input type="text" class="form-control" id="InputHighSchool" name="InputHighSchool" placeholder="고등학교 이름" maxlength="10" onchange="step2ButtonChange();">
											
											</div>
											<div class="col-xs-4 col-md-4" style="padding-left:0px;">
												<div class="btn-group">
													<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">공개범위 <span class="caret"></span></button>
													<ul class="dropdown-menu" style="min-width: 0px;">
														<li class="active"><a href="javascript:setPrivate('HighSchool', 'all');">전체공개</a></li>
														<li><a href="javascript:setPrivate('HighSchool', 'group');">그룹공개</a></li>
														<li><a href="javascript:setPrivate('HighSchool', 'none');">비공개</a></li>
													</ul>
													<input type="hidden" id="HighSchoolPrivate" name="HighSchoolPrivate" value="all">
												</div>
											</div>
										</div>
									</div>
									
									<div class="form-group">
										<div class="row">
				   							<div class="col-xs-8 col-md-4">
				   								<label for="InputCollege" class="sr-only">대학교</label>
												<input type="text" class="form-control" id="InputCollege" name="InputCollege" placeholder="대학교 이름" maxlength="10" onchange="step2ButtonChange();">
											</div>
											<div class="col-xs-4 col-md-4" style="padding-left:0px;">
												<div class="btn-group">
													<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">공개범위 <span class="caret"></span></button>
													<ul class="dropdown-menu" style="min-width: 0px;">
														<li class="active"><a href="javascript:setPrivate('College', 'all');">전체공개</a></li>
														<li><a href="javascript:setPrivate('College', 'group');">그룹공개</a></li>
														<li><a href="javascript:setPrivate('College', 'none');">비공개</a></li>
													</ul>
													<input type="hidden" id="CollegePrivate" name="CollegePrivate" value="all">
												</div>
											</div>
										</div>
									</div>	
									
									<div class="form-group">
										<div class="row">
				   							<div class="col-xs-8 col-md-4">
				   								<label for="InputWorkplace" class="sr-only">직장</label>
												<input type="text" class="form-control" id="InputWorkplace" name="InputWorkplace" placeholder="회사 이름" maxlength="10" onchange="step2ButtonChange();">
											</div>
											<div class="col-xs-4 col-md-4" style="padding-left:0px;">
												<div class="btn-group">
													<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">공개범위 <span class="caret"></span></button>
													<ul class="dropdown-menu" style="min-width: 0px;">
														<li class="active"><a href="javascript:setPrivate('Workplace', 'all');">전체공개</a></li>
														<li><a href="javascript:setPrivate('Workplace', 'group');">그룹공개</a></li>
														<li><a href="javascript:setPrivate('Workplace', 'none');">비공개</a></li>
													</ul>
													<input type="hidden" id="WorkplacePrivate" name="WorkplacePrivate" value="all">
												</div>
											</div>
										</div>
									</div>	
									
									<div class="form-group">
										<div class="row">
				   							<div class="col-xs-8 col-md-4">
				   								<label for="InputResidence" class="sr-only">거주지</label>
												<input type="text" class="form-control" id="InputResidence" name="InputResidence" placeholder="거주지" maxlength="20" onchange="step2ButtonChange();">
											</div>
											<div class="col-xs-4 col-md-4" style="padding-left:0px;">
												<div class="btn-group">
													<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">공개범위 <span class="caret"></span></button>
													<ul class="dropdown-menu" style="min-width: 0px; z-index:99999!important;">
														<li class="active"><a href="javascript:setPrivate('Residence', 'all');">전체공개</a></li>
														<li><a href="javascript:setPrivate('Residence', 'group');">그룹공개</a></li>
														<li><a href="javascript:setPrivate('Residence', 'none');">비공개</a></li>
													</ul>
													<input type="hidden" id="ResidencePrivate" name="ResidencePrivate" value="all">
												</div>
											</div>
										</div>
									</div>
									<button type="button" title="변경하기" class="btn btn-primary modify" disabled="disabled" onclick="">변경하기</button>
			   						<button type="button" title="취소" class="btn btn-default" data-toggle="collapse" data-target="#editInfoPrivacy" data-parent="#accordion2"><i class="glyphicon glyphicon-repeat"></i> 취소</button>
		   						</div> <!-- end panel-body -->
	   						</div> <!-- end editInfoPrivacy -->
	   					</div>
   					</div> <!-- end accordion -->
    				
    			</div>
    			<!-- 공개 범위 -->
    			
    			<!-- 그룹 관리 -->
    			<div id="group" class="subLayout">
    				<h4 class="hidden-xs"><strong>그룹 관리</strong></h4>
	    			<div class="visible-xs">
	    				<div style="float: left; color: #428BCA; cursor: pointer;" onclick="mobile_menu_back('group');"><i style="font-size:1.3em;" class="fa fa-chevron-left"></i>&nbsp;설정</div>
	    				<div style="margin: 0 auto;"><h4 style="text-align: center;"><strong>그룹 관리</strong></h4></div>
    				</div>
    				<hr style="margin-top:8px;">
    			</div>
    			<!-- 그룹 관리 -->
    			
    			<!-- 알림 -->
    			<div id="notifications" class="subLayout">
    				<h4 class="hidden-xs"><strong>알림</strong></h4>
	    			<div class="visible-xs">
	    				<div style="float: left; color: #428BCA; cursor: pointer;" onclick="mobile_menu_back('notifications');"><i style="font-size:1.3em;" class="fa fa-chevron-left"></i>&nbsp;설정</div>
	    				<div style="margin: 0 auto;"><h4 style="text-align: center;"><strong>알림</strong></h4></div>
    				</div>
    				<hr style="margin-top:8px;">
    				
    			</div>
    			<!-- 알림 -->
    			
    			<!-- 초대 -->
    			<div id="invite" class="subLayout">
    				<h4 class="hidden-xs"><strong>초대</strong></h4>
	    			<div class="visible-xs">
	    				<div style="float: left; color: #428BCA; cursor: pointer;" onclick="mobile_menu_back('invite');"><i style="font-size:1.3em;" class="fa fa-chevron-left"></i>&nbsp;설정</div>
	    				<div style="margin: 0 auto;"><h4 style="text-align: center;"><strong>초대</strong></h4></div>
    				</div>
    				<hr style="margin-top:8px;">
    				
    			</div>
    			<!-- 초대 -->
    			
    			<!-- 회원탈퇴 -->
    			<div id="memberLeave" class="subLayout">
    				<h4 class="hidden-xs"><strong>회원탈퇴</strong></h4>
	    			<div class="visible-xs">
	    				<div style="float: left; color: #428BCA; cursor: pointer;" onclick="mobile_menu_back('memberLeave');"><i style="font-size:1.3em;" class="fa fa-chevron-left"></i>&nbsp;설정</div>
	    				<div style="margin: 0 auto;"><h4 style="text-align: center;"><strong>회원탈퇴</strong></h4></div>
    				</div>
    				<hr style="margin-top:8px;">
    				<p>서클에서 회원님의 계정을 영구히 삭제합니다</p>
    				<abbr title="서클에서 회원님의 데이터가 영구히 삭제되는 항목" class="text-warning">삭제되는 항목 :</abbr>
    				<ul style="margin-top:10px; padding-left:30px;">
    					<li>회원님의 이름</li>
    					<li>회원님의 이메일</li>
    					<li>회원님의 핸드폰 번호</li>
    					<li>모든 개인정보가 삭제됩니다</li>
    				</ul>
    				<br>
    				<abbr title="서클에서 회원님의 데이터가 보관되는 항목" class="text-warning">삭제되지 않는 항목 :</abbr>
    				<ul style="margin-top:10px; padding-left:30px;">
    					<li>회원님의 로그 기록</li>
    					<li>그룹에 올린 게시글</li>
    				</ul>
    				<br>
    				<p class="text-danger"><strong>회원탈퇴시 계정은 영구히 삭제되며, 복구할 수 없습니다.</strong></p>
    				<small class="text-muted"><i class="glyphicon glyphicon-exclamation-sign"></i>&nbsp;그룹에 올린 게시글은 탈퇴전에 정리해주시기 바랍니다.</small>
    				<br><br>
    				<form id="ff" name="ff" method="post" action="/memberLeave">
    					<input id="memberNum" name="memberNum" type="hidden"  value="1">
    					<button type="submit" class="btn btn-danger" title="탈퇴하기"><i class="glyphicon glyphicon-remove"></i> 탈퇴하기</button>
    				</form>
    				
    			</div>
    			<!-- 회원탈퇴 -->
    			
    			<!-- 모바일용 설정메뉴 -->
				<div id="mobile_menu" style="display:none; position:absolute; border:1px #DBDBDB solid; width:100%; padding:15px; background-color: #fff;">
					<h4 class="text-center"><strong>설정</strong></h4>
					<hr style="margin-top:8px;">
					
					<ul class="list-unstyled" id="mobile_menu_list">
	    				<li data-menu="mobile" onclick="mobile_tabmenu('account')"><p><i class="fa fa-edit"></i>&nbsp;정보변경<i class="fa fa-chevron-right pull-right" style="color:#828282;"></i></p></li>
	    				<li data-menu="mobile" onclick="mobile_tabmenu('privacy')"><p><i class="glyphicon glyphicon-lock" style="color:#FDBD3B"></i>&nbsp;공개 범위<i class="fa fa-chevron-right pull-right" style="color:#828282;"></i></p></li>
	    				<li data-menu="mobile" onclick="mobile_tabmenu('group')"><p><i class="fa fa-group" style="color:#3B5998"></i>&nbsp;그룹 관리<i class="fa fa-chevron-right pull-right" style="color:#828282;"></i></p></li>
	    				<li data-menu="mobile" onclick="mobile_tabmenu('notifications')"><p><i class="fa fa-bell" style="color:#FF8000"></i>&nbsp;알림<i class="fa fa-chevron-right pull-right" style="color:#828282;"></i></p></li>
	    				<li data-menu="mobile" onclick="mobile_tabmenu('invite')"><p><i class="glyphicon glyphicon-ok-sign" style="color:#307830;"></i>&nbsp;초대<i class="fa fa-chevron-right pull-right" style="color:#828282;"></i></p></li>
	    				<li data-menu="mobile" onclick="mobile_tabmenu('memberLeave')"><p><i class="glyphicon glyphicon-minus-sign" style="color:#BF0000;"></i>&nbsp;회원탈퇴<i class="fa fa-chevron-right pull-right" style="color:#828282;"></i></p></li>
	    			</ul>
				</div>
				<!-- 모바일용 설정메뉴 -->
				
    			</div> <!-- end sub -->
    		</div> <!-- end row -->
    	</div> <!-- end container -->
    </div><!-- end mainWarp -->
	
	<!-- 경보창 -->
	<div class="alert alert-success" id="successAlert">
		<button type="button" data-dismiss="alert" class="close">×</button>
		<a href="#" class="alert-link commonFont"></a>
	</div>

	<div class="alert alert-danger" id="failAlert">
		<button type="button" data-dismiss="alert" class="close">×</button>
		<a href="#" class="alert-link commonFont"></a>
	</div>
    <!-- 경보창 -->
  
	<!-- footer -->
	<div class="hidden-xs">
		<jsp:include page = "footer.jsp" flush="false"/>
	</div>
	<!-- footer -->
  
  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->  
  <script src="/resources/js/bootstrap.js"></script>
  </body>
</html>